(function ($) {
    $.fn.drag = function (options) {
        let x, drag = this, isMove = false, defaults = {};
        var options = $.extend(defaults, options);
        let handler = drag.find('.handler');
        let drag_bg = drag.find('.drag_bg');
        let text = drag.find('.drag_text');
        let maxWidth = drag.width() - handler.width();  //能滑动的最大间距

        //鼠标按下时候的x轴的位置
        handler.mousedown(function (e) {
            isMove = true;
            x = e.pageX - parseInt(handler.css('left'), 10);
        });
        handler.on("touchstart", function (e) {
            isMove = true;
            x = e.originalEvent.changedTouches[0].pageX - parseInt(handler.css('left'), 10);
        });

        //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
        $(document).mousemove(function (e) {
            let _x = e.pageX - x;
            if (isMove) {
                if (_x > 0 && _x <= maxWidth) {
                    handler.css({'left': _x});
                    drag_bg.css({'width': _x});
                } else if (_x > maxWidth) {  //鼠标指针移动距离达到最大时清空事件
                    dragOk();
                }
            }
        }).mouseup(function (e) {
            isMove = false;
            let _x = e.pageX - x;
            if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                handler.css({'left': 0});
                drag_bg.css({'width': 0});
            }
        });

        //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
        $(document).on("touchmove", function (e) {
            let _x = e.originalEvent.changedTouches[0].pageX - x;
            if (isMove) {
                if (_x > 0 && _x <= maxWidth) {
                    handler.css({'left': _x});
                    drag_bg.css({'width': _x});
                } else if (_x > maxWidth) {  //鼠标指针移动距离达到最大时清空事件
                    dragOk();
                }
            }
        }).on("touchend", function (e) {
            isMove = false;
            let _x = e.originalEvent.changedTouches[0].pageX - x;
            if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                handler.css({'left': 0});
                drag_bg.css({'width': 0});
            }
        });

        //清空事件
        function dragOk() {
            handler.removeClass('handler_bg').addClass('handler_ok_bg');
            text.text('验证通过');
            inputOninput();
            drag.css({'color': '#fff'});
            handler.unbind('mousedown');
            $(document).unbind('mousemove');
            $(document).unbind('mouseup');
        }
    };
})(jQuery);
$('#drag').drag();
let inputdiv = document.querySelector('.inputdiv');
let input1 = inputdiv.querySelectorAll("input")[0];
let hint1 = inputdiv.querySelectorAll('span')[0];
let input2 = inputdiv.querySelectorAll("input")[1];
let hint2 = inputdiv.querySelectorAll('span')[1];
let button = inputdiv.querySelector("button");
let drag = document.getElementById('drag');
let dragText = drag.querySelector('.drag_text');
let form = document.querySelector('body > form');
function checkInput(input) {
    document.querySelector('label[for="' + input.id + '"]').style.visibility = input.value ? 'hidden' : 'visible';
}

checkInput(input1);
checkInput(input2);

function register() {

}

function feedback() {

}

function inputOninput() {
    checkInput(input1);
    checkInput(input2);
    if (input2.value && (input1.value.length >=4) && dragText.innerText === '验证通过') {
        button.style.backgroundColor = "#3D7EFF";
        button.style.color = "#fff";
        hint1.style.visibility = 'hidden';
        hint2.style.visibility = 'hidden';
        /*drag.style.display = 'none';*/
        button.disabled = false;
    } else if (input2.value && (input1.value.length >=4) ) {
        drag.style.display = 'block';
    } else {
        button.style.backgroundColor = "#e5e5e5";
        button.style.color = "#a0a0a0";
        button.disabled = true;
    }
}
form.onsubmit = function () {
    if(input1.value === '123456'&& input2.value === '123456'){
        localStorage.isLogin = true;
        return true;
    }else {
        document.querySelector('body > form > div.inputdiv > p:nth-child(1) > span').style.visibility = 'visible';
        document.querySelector('body > form > div.inputdiv > p:nth-child(2) > span').style.visibility = 'visible';
        return false;
    }
};